<template>
    <div>
        <el-card>
            <el-page-header content="留言列表" icon="" title="留言反馈"></el-page-header>
            <el-table :data="tableData" height='600px' style="width: 100%">
                <el-table-column  prop="title" label="标题" width="120"/>                              
                <el-table-column  prop="name" label="姓名" width="80"/>                              
                <el-table-column  prop="phone" label="联系电话" width="100"/>                              
                <el-table-column  prop="email" label="邮箱" width="100"/>                              
                <el-table-column  prop="content" label="反馈内容"/>                              
                <el-table-column prop="editTime" label="反馈时间"  width="120">
                    <template #default="scope">
                        {{ formatTime.getTime(scope.row.editTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态" width="90">
                    <template #default="scope">
                        <el-tag v-if="scope.row.state===0" type="success">未回复</el-tag> 
                        <el-tag v-else>已回复</el-tag>   
                    </template>
                </el-table-column>              
                
                <el-table-column prop="address" label="操作" width="150">
                    <template #default="scope">  
                        <el-button size="small"  @click="handleEdit(scope.$index,scope.row)"
                        >编辑</el-button> 
                        <el-popconfirm title="你确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>                  
                    </template>
                </el-table-column>
            </el-table>
        </el-card>    
        <el-dialog
        title="查看留言"
        v-model="dialogVisible"
        width="50%"        
        >
            <el-form
            :model="feedbackForm"
            :rules="feedbackRules"
            ref="formRef"
            label-width="80px"
            >                
                <el-form-item label="反馈内容" prop="content">
                    <el-input v-model="feedbackForm.content" 
                    :autosize="{ minRows: 5, maxRows: 10 }"
                    type="textarea" disabled></el-input>
                </el-form-item>               
            </el-form>
            <template #footer>
                <span class="dialog-footer">                   
                <el-button @click="dialogVisible = false">取 消</el-button>                
                <el-button type="primary" @click='handleEditReply(feedbackForm)'>已回复</el-button>
                </span>
            </template>
        </el-dialog>   
    </div>
</template>

<script setup>
import {ref,onMounted,reactive} from 'vue'
import {allFeedbackAPI, deleteFeedbackAPI, handleEditReplyAPI} from '@/api'
import formatTime from '@/until/formatTime'
import {Edit,Delete,StarFilled} from '@element-plus/icons-vue';
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'

const router=useRouter()
const tableData=ref([])
onMounted(()=>{
    getTableData()
})
const getTableData=async()=>{
    const {data:res}=await allFeedbackAPI()
    tableData.value=res.feedback
}

const formRef=ref()
let feedbackForm = reactive({ id: "", content: "" })


// 删除留言反馈
const handleDelete=async (item)=>{
    const {data:res}=await deleteFeedbackAPI(item.id)
    if(res.status!==0 && res.message!=="删除成功"){
        ElMessage.error('删除失败')
    }else{
        ElMessage.success('删除成功')
        getTableData()
    }
}

const dialogVisible=ref(false)

// 编辑按钮
const handleEdit=(index,row)=>{
    dialogVisible.value=true
    feedbackForm=row    
}


// 编辑已回复按钮
const handleEditReply=async(item)=>{
    console.log(item.id);
    const {data:res}=await handleEditReplyAPI(item.id)
    // if(res.status!==0 && res.message!=="删除成功"){
    //     ElMessage.error('删除失败')
    // }else{
    //     ElMessage.success('删除成功')
    //     getTableData()
    // }  
    if (res.status !== 0 ) {
            ElMessage.error('更新失败');
            return
        }
        ElMessage.success('更新成功')
        dialogVisible.value=false  
        getTableData()
}
</script>

<style lang="scss" scoped>

.el-table{
    margin-top:50px
}

.the_img{
    width: 50px;
    height: 50px;
}
</style>